<template>
  <section class="event-all" :class="{'event-all-show' : isShow}">
    <div class="table-box">
      <div class="input-box" v-show="is_edit" :class="{'input-show': is_edit}">
        <input type="text" v-model="info.content" ref="content" @keydown.enter="editData">
        <button @click="editData">确定</button>
      </div>

      <div class="screen-box">
        <div class="select" :class="{'active': active}">
          <div class="value" @click="active = !active">{{getTypeName}}</div>
          <div class="select-body">
            <div class="option" @click="doSelect(0)">筛选类型</div>
            <div class="option" @click="doSelect(1)">未完成</div>
            <div class="option" @click="doSelect(2)">已完成</div>
            <div class="option" @click="doSelect(3)">已取消</div>
          </div>
        </div>

        <input type="text" v-model="screen_title" class="search" placeholder="筛选关键词">
      </div>

      <table class="event-table">
        <thead>
          <tr>
            <th>#</th>
            <th>所有事项</th>
            <th>类型</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in notepad" :key="item.id">
            <td>{{index + 1}}</td>
            <td>{{item.content}}</td>
            <td>{{getType(item.type)}}</td>
            <td>
              <button @click="showInput(index)">编辑</button>
              <button class="del-btn" @click="showDialog(index, item.id)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

  </section>
</template>

<script>
export default {
  data() {
    return {
      active: false,
      screen_type: 0,
      screen_title: '',
      is_edit: false,
      info: {
        content: '',
        idnex: 0,
        id: 0
      }
    }
  },
  props: ['isShow'],
  computed: {
    notepad() {
      var that = this
      // 得到所有事件 已完成 未完成已取消
      return that.$store.getters.getEventList.filter(obj => {
        if(that.screen_type !== 0 && that.screen_title === '') {
          return obj.type == that.screen_type
        }else if(that.screen_type !== 0 && that.screen_title !== '') {
          return (obj.type == that.screen_type) && (obj.content.indexOf(that.screen_title) !== -1)
        }else if(that.screen_type === 0 && that.screen_title !== '') {
          return obj.content.indexOf(that.screen_title) !== -1
        }else {
          return obj
        }
      })
    },
    getTypeName() {
      var that = this 
      return that.getType(that.screen_type) || '筛选类型'
    }
  },
  methods: {
    doSelect(type) {
      this.screen_type = type
      this.active = false
    },
    // 根据type显示 事件类型 是已完成/未完成/已取消
    getType(type) {
      let str = ''
      switch(type) {
        case 1: 
          str = '未完成'
          break
        case 2: 
          str = '已完成'
          break 
        case 3: 
          str = '已取消'
          break
      }
      return str
    },

    showDialog(index, id) {
      this.$emit('deldialog',index, id)
    },
    showInput(index) {
      this.is_edit = true
      this.info = {
        index: index,
        content: this.notepad[index].content,
        id: this.notepad[index].id
      }

      this.$refs.content.focus()
    },
    editData(){
      this.info.content = this.info.content.trim()
      if(this.info.content) {
        this.$store.dispatch('editevent', this.info)
        this.is_edit = false
        this.$toast('保存成功')
      }
    }
  }



}
</script>

<style lang="scss" scoped>
.event-all {
  position: absolute;
  left: 0;
  top: 3em;
  right: 0;
  bottom: 0;
  background: #fff;
  overflow-Y: auto;
  transform: translateX(-100%);
  transition: transform .5s;
  &.event-all-show {
    transform: translateX(0);
  }
  
  .table-box {
    width: 100%;
    max-width: 1000px;
    margin: 3em auto;

    .input-box {
      display: flex;
      position: absolute;
      top: 1.5em;
      width: 100%;
      max-width: 1000px;
      padding: 0.8em 1em;
      background: #eee;
      transform: translateY(-100%);
      transition: transform .3s;
      z-index: 100;

      &.input-show {
        transform: translateY(0%);
      }
      input {
        flex: 1;
        padding: 0.5em;
        border-radius: .2em;
        border: 1px solid #aaa;
      }

      button {
        padding: 0 1em;
        border-radius: .2em;
        margin-left: .7em;
        color: #fff;
        border: none;
      }
    }
    .screen-box {
      display: flex;
      align-items: center;
      font-size: 0.8em;
      color: #aaa;

      .select {
        flex: 1;
        position: relative;

        .value {
          // margin-right: 1em;
          padding: 0.5em;
          border: 1px solid #eee;
          display: flex;
          align-items: center;
          justify-content: space-around;
          // 做那个向下的箭头
          &::after {
            content: "";
            display: block;
            width: .5em;
            height: .5em;
            border: {
              right: 1px solid #aaa;
              bottom: 1px solid #aaa;
            }
           transform: rotate(45deg);
          }
        }

        .select-body {
          position: absolute;
          top: 2.2em;
          left: 0;
          width: 100%;
          padding: 0.5em;
          background: #fff;
          // border:1px solid #eee;
          // box-shadow: 0 0 1px #ddd;
          border-top: 1px solid #eee;
          height: 0;
          overflow: hidden;
          .option {
            padding: 0.5em;
          }

        }

        &.active {
          .select-body {
            height: auto;
            border:1px solid #eee;
            box-shadow: 0 0 1px #ddd;
          }
        }
      }

      .search {
        flex: 2.5;
        padding: 0.5em;
        border: 1px solid #aaa;
        border-radius: .2em;
        margin-left: 1em;
      }
    }
  }

  .event-table {
    width: 100%;
    margin-top: 1em;
    border-spacing: 0;
    border: {
      left: 1px solid #eee;
      top: 1px solid #eee;
    }

    th, td {
      padding: 0.5em 0.8em;
      vertical-align: middle;
      text-align: center;
      // 隐藏超出范围的文本
      text-overflow: ellipsis;
      border: {
        right: 1px solid #eee;
        bottom: 1px solid #eee;
      }
    }

    button {
      padding: .2em .5em;
      font-size: 0.8em;
      border: none;
      color: #fff;
      border-radius: .2em;
      &.del-btn {
        background: #f57067;
      }

    }
  }
}
</style>